<template>
  <div class="edit-popup">
    <!-- 我的频道 -->
    <!-- 标题 -->
    <van-cell title="我的频道">
      <van-button
        size="small"
        round
        class="edit-btn"
        @click="isEdit = !isEdit"
        >{{ isEdit ? setBtnCh[0] : setBtnCh[1] }}</van-button
      >
    </van-cell>
    <!-- 频道 -->
    <div class="my-pannel">
      <van-grid :border="false">
        <van-grid-item
          :text="item.name"
          v-for="(item, index) in myChannels"
          :key="item.id"
          :class="{ active: constantChannels.includes(item.name) }"
          @click="onMyChannel(item, index)"
        >
          <template #icon>
            <van-icon
              name="cross"
              v-if="isEdit && !constantChannels.includes(item.name)"
            />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 推荐频道 -->
    <!-- 标题 -->
    <van-cell title="推荐频道" />
    <!-- 频道 -->
    <div class="recommend-pannel">
      <van-grid :border="false">
        <van-grid-item
          :text="item.name"
          v-for="item in getRecommedChannels"
          :key="item.id"
          @click="$emit('addChannels', item)"
        >
          <template #icon>
            <van-icon name="plus" />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannelsAPI } from "@/api";
export default {
  name: "EditPopup",
  props: {
    myChannels: {
      tyepe: Array,
      default: () => []
    }
  },

  created() {
    this.getAllChannels();
  },
  data() {
    return {
      // 是否处于编辑状态中
      isEdit: false,
      // 不能被编辑，高亮
      constantChannels: ["推荐"],
      //
      setBtnCh: ["完成", "编辑"],
      allChannels: []
    };
  },
  methods: {
    async getAllChannels() {
      const { data } = await getAllChannelsAPI();
      console.log(data);
      this.allChannels = data.data.channels;
    },
    onMyChannel({ id, name }, index) {
      // 如果是编辑状态就删除，并且不是推荐，删除
      if (this.isEdit) {
        if (!this.constantChannels.includes(name)) {
          this.$emit("delete-channel", id);
        }
      } else {
        // 反之就是跳转
        this.$emit("update-active", index);
        console.log("跳转");
      }
    }
  },
  computed: {
    // eslint-disable
    getRecommedChannels() {
      // 传入id，判断myChannels里面包不包括这一项，！！是表示把数据 转换为布尔值
      const isIncludeMyChannels = (id) =>
        !!this.myChannels.find((item) => item.id === id);
      // 把myChannels里面包含这一项的筛选出来，filter为true是保留，false是筛选出去
      return this.allChannels.filter((item) => !isIncludeMyChannels(item.id));
    }

    //
  }
};
</script>

<style scoped lang="less">
.active {
  :deep(.van-grid-item__text) {
    color: red;
  }
}
.edit-popup {
  padding-top: 1.33333rem;
  .edit-btn {
    border-color: red;
    color: red;
    width: 1.38667rem;
    height: 0.64rem;
  }
  :deep(.van-grid-item__content) {
    width: 175px;
    height: 86px;
    margin: 0 auto 10px;
    background-color: #f4f5f6;
  }
  .my-pannel {
    // 编辑按钮
    .editBtn {
      width: 104px;
      height: 48px;
      border-color: red;
      color: red;
    }

    // 编辑按钮居中
    .van-cell__value {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    // 关闭按钮样式
    :deep(.van-grid-item__content) {
      position: relative;

      .van-grid-item__icon-wrapper {
        position: absolute;
        top: 0;
        right: 0;
        .van-icon-cross {
          position: absolute;
          top: 0;
          right: 0;
          font-size: 3px;
          transform: translate(20%, -35%);
          border: 0.02667rem solid #000;
          border-radius: 50%;
          text-align: center;
          line-height: 0.32rem;
        }
      }
    }
  }
  // 推荐频道
  .recommend-pannel {
    // 推荐频道加号样式
    :deep(.van-grid-item__content) {
      flex-direction: row;
      .van-grid-item__icon {
        font-size: 0.5rem;
      }
      .van-grid-item__icon-wrapper {
        position: relative;
        bottom: 4px;
      }
      .van-grid-item__text {
        margin-top: 0;
      }
    }
    .van-icon-plus {
      font-size: 3px;
    }
  }
}
</style>
